<template>
  <div class="content-block block-half-1" v-loading="loading">
    <div class="info-head">{{ title }}</div>
    <div class="info-content">
      <v-chart
        :option="chartOption" style="width: 100%;height: 400px;"
        :theme="chartTheme" autoresize
      ></v-chart>
    </div>
  </div>
</template>

<script>
import { getEnergyUnitName } from '@/utils'
import { ELECTRIC, ENERGY_VARIETY, GAS, WATER, COAL, OTHER, } from '@/config'
import MixinVchartTheme from '@/mixins/mixin-vchart-theme';
import {
  loadMonthGasList,
  // loadMonthWaterList,
  loadMonthList,
  loadMonthElectricityList,
} from '@/api/energyDataManagement'

export default {
  name: 'grid-item-two',
  mixins: [MixinVchartTheme],
  props: {
    title: String,
  },
  data () {
    return {
      loading: false,
      waterList: [],
      electricList: [],
      gasList: [],
      coalList: [],
      otherList: [],
      energyVariety: ENERGY_VARIETY,
    }
  },
  computed: {
    chartOption () {
      const energyVariety = this.energyVariety
      const data = {
        [WATER]: this.waterList,
        [ELECTRIC]: this.electricList,
        [GAS]: this.gasList,
        [COAL]: this.coalList,
        [OTHER]: this.otherList,
      }
      return {
        legend: {
          left: 'center',
          data: energyVariety.map(v => v.name)
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: Array(12).fill(1).map((v, i) => (i + 1) + '月'),
        },
        yAxis: [
          ...this.energyVariety.map((v, i) => ({
            type: 'value',
            name: this.getUnit(v.value),
            position: i === 0 ? 'left' : 'right',
            offset: [0, 0, -100, -200][i],
            axisLine: {
              show: true,
            },
          }))
        ],
        series: [
          ...this.energyVariety.map((v, i) => ({
            name: v.name,
            type: 'line',
            smooth: true,
            yAxisIndex: i,
            tooltip: {
              valueFormatter: value => `${value} ${this.getUnit(v.value)}`
            },
            data: data[v.value]
          }))
        ]
      }
    }
  },
  mounted () {
    this.query()
  },
  methods: {
    resolveData (data) {
      const result = Array(12).fill('-');
      (data || []).forEach((v, i) => {
        const m = (v.name || '').replace(/\d{4}-(\d{2})/, (p, m) => m)
        result.splice(Number(m) - 1, 1, v.val ? Number(v.val).toFixed(2) : '-')
      })
      return result
    },
    query () {
      this.loading = true
      const rq1 = loadMonthElectricityList().then(res => {
        if (res.code === 200) {
          return this.resolveData(res.data)
        }
      })
      // const rq2 = loadMonthWaterList().then(res => {
      //   if (res.code === 200) {
      //     return this.resolveData(res.data)
      //   }
      // })
      const rq3 = loadMonthGasList().then(res => {
        if (res.code === 200) {
          return this.resolveData(res.data)
        }
      })
      const rq4 = loadMonthList(COAL).then(res => {
        if (res.code === 200) {
          return this.resolveData(res.data)
        }
      })
      const rq5 = loadMonthList(OTHER).then(res => {
        if (res.code === 200) {
          return this.resolveData(res.data)
        }
      })
      return Promise.all([rq1, rq3, rq4, rq5]).then(([electricList, gasList, coalList, otherList]) => {
        if (electricList) {
          this.electricList = electricList
        }
        if (gasList) {
          this.gasList = gasList
        }
        if (coalList) {
          this.coalList = coalList
        }
        if (otherList) {
          this.otherList = otherList
        }
      }).finally(() => {
        this.loading = false
      })
    },
    getUnit (key) {
      return getEnergyUnitName(key)
    },
  },
}
</script>
